<template>
  <el-popover
    :visible="visible"
    placement="bottom"
    :width="props.width"
    :show-arrow="false"
  >
    <template #reference>
      <div
        :style="{
          width: props.width + 'px',
        }"
        @click="visible = !visible"
        class="operatorSelectContainer"
      >
        <div v-if="fieldsList.some((item) => item.isChecked)" class="holder">
          xuanzhong
        </div>
        <div v-else class="holder">请选择字段</div>
        <img
          :style="{ transform: visible ? 'rotate(180deg)' : 'rotate(0)' }"
          class="icon"
          src="@/assets/lifecycle/selectIcon.svg"
        />
      </div>
    </template>
    <template #default>
      <div class="operatorContent">
        <el-input
          v-model="searchValue"
          placeholder="请输入关键词"
          :prefix-icon="Search"
        ></el-input>
        <ul class="fieldList">
          <li class="item" v-for="item in fieldsList" :key="item.id">
            <el-checkbox v-model="item.isChecked" @change="handleCheck" />
            <span>{{ item.name }}</span>
          </li>
        </ul>
        <div class="footerBtn">
          <el-button @click="visible = false">取消</el-button>
          <el-button type="primary">确定</el-button>
        </div>
      </div>
    </template>
  </el-popover>
</template>
<script setup lang="ts">
  import { ref } from "vue";
  import { Search } from "@element-plus/icons-vue";

  interface propsType {
    width: number;
  }
  const visible = ref(false);
  const searchValue = ref("");
  const props = defineProps<propsType>();
  const fieldsList = ref([
    {
      id: 0,
      name: "迭代",
      isChecked: false,
    },
    {
      id: 1,
      name: "参与者",
      isChecked: false,
    },
    {
      id: 2,
      name: "抄送",
      isChecked: false,
    },
    {
      id: 3,
      name: "标题",
      isChecked: false,
    },
    {
      id: 4,
      name: "抄送",
      isChecked: false,
    },
    {
      id: 5,
      name: "标题",
      isChecked: false,
    },
  ]);

  const handleCheck = () => {
    // console.log(fieldsList.value);
  };
</script>

<style scoped lang="scss">
  .operatorSelectContainer {
    cursor: pointer;
    box-sizing: border-box;
    width: 100%;
    height: 32px;
    border-radius: 4px;
    border: 1px solid #e6e6e6;
    padding: 6px 8px;
    display: inline-flex;
    justify-content: space-between;
    align-items: center;
    .holder {
      font-size: 14px;
      color: #999999;
      height: 20px;
      line-height: 20px;
      flex: 1;
    }
    .icon {
      transition: all 0.3s;
      width: 16px;
      height: 16px;
    }
  }
  .operatorContent {
    .fieldList {
      list-style: none;
      padding: 0;
      margin: 10px 0 0 0;
      max-height: 200px;
      overflow: auto;
      .item {
        display: flex;
        align-items: center;
        gap: 8px;
        height: 40px;
        border-radius: 4px;
        padding: 0 8px;
        span {
          flex: 1;
          font-size: 14px;
          color: #141414;
          white-space: nowrap; /* 禁止文本换行 */
          overflow: hidden; /* 隐藏溢出的文本 */
          text-overflow: ellipsis; /* 溢出的文本显示为省略号 */
        }
        transition: all 0.3s;
        &:hover {
          background: #f2f2f2;
        }
      }
    }
    .footerBtn {
      padding: 8px 0 0 0;
      text-align: right;
    }
  }
</style>
